import Taro from "@tarojs/taro";
import {  useWindowHeight } from "@hooks";
import { Swiper,SwiperItem ,Image, View } from "@tarojs/components";
import React, { useCallback, useState ,useEffect  } from "react";
import PostList from "./post-list";

import FollowPostList from "./followPostList";
import { useAppDispatch, useAppSelector } from "@src/store";
import { getUserInfo } from "@src/store/userInfo";
import CustomTabBar from "@src/components/custom-tab-bar";

import "./index.scss";
import TabScreen from "@src/components/layout/TabScreen";



const Home = ()=>{
    const [current,setCurrent] = useState(1);
    const [menu,setMenu] = useState([
        {
            menuName:"关注"
        },
        {
            menuName:"推荐"
        }
    ]);


    const dispatch = useAppDispatch();
    useEffect(()=>{
        dispatch(getUserInfo());
        
    },[dispatch]);

    const { data:{ bgSrc = "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic_source%2F95%2Fe2%2F09%2F95e20960f6bcb6d444dfa59d142e9300.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1652233552&t=e74729408f32a9b45b8095847525213c" } } = useAppSelector(state=>state.globalData);


    const windowHeight = useWindowHeight(true);
    const handleChange = useCallback((event)=>{
        const { current } = event.detail;
        setCurrent(current);
    },[]);

    const handleGoPublish = useCallback(()=>{
        Taro.navigateTo({
            url:"/pages/mediaGallery/index"
        });
    },[]);

    return (<TabScreen style={{ backgroundColor:"#fff" }}>
        {/* {bgSrc ? <Image style={{ position:"absolute",top:0,bottom:0,left:0,right:0,width:"100%",height:"100%" }} mode="aspectFill" src={bgSrc} /> : null} */}
        {/* <BlurView  blurType="dark"
          blurAmount={10}
          reducedTransparencyFallbackColor="white" 
          style={{ position:"absolute",top:0,bottom:0,left:0,right:0 }}
        /> */}
        <View style={{ paddingTop:22 }}>
            <CustomTabBar underline current={current} list={[{ text:"关注" },{ text:"推荐" }]} style={{ height:44 }} onChange={(index)=>{
                setCurrent(index);
            }}
            />
        </View>
        <Swiper  current={current} style={{ height:windowHeight  }}
          onChange={handleChange}
        >
            {menu.map((item,index) => {
            return (
            <SwiperItem key={index} className="home__content">
                {index === 0 ?   <FollowPostList /> : <PostList />}
                
            </SwiperItem>
            );
        })}
        </Swiper>
        <View className="publishBtn" onClick={handleGoPublish}>+</View>
    </TabScreen>);
};

export default Home;